<template>
  <div class="container text-center my-4">
    <h3 class="my-5 display-2 text-gray-50">Text Colors</h3>
    <div class="row d-flex justify-content-center text">
      <div v-for="item in aliasItems" :key="item" class="text-item" :class="'text-' + item">{{ '.text-' + item }}</div>
    </div>
    <div class="row d-flex justify-content-center text">
      <div v-for="item in colorItems" :key="item" class="text-item" :class="'text-' + item">{{ '.text-' + item }}</div>
    </div>
    <h3 class="my-5 display-2 text-gray-50">Buttons</h3>
    <div v-for="(size, index) in ['btn-lg', 'normal', 'btn-sm']" :key="'buttons-' + index">
      <h3 class="my-4 text-gray-50" :class="size">{{ size + ' buttons' }}</h3>
      <div class="row d-flex justify-content-center">
        <button v-for="item in aliasItems" :key="item" class="btn" :class="size + ' btn-' + item">{{ item.charAt(0).toUpperCase() + item.slice(1) }}</button>
      </div>
      <div class="row mt-2 d-flex justify-content-center">
        <button v-for="item in colorItems" :key="item" class="btn" :class="size + ' btn-' + item">{{ item.charAt(0).toUpperCase() + item.slice(1) }}</button>
      </div>
    </div>
    <div v-for="(size, index) in ['btn-lg', '', 'btn-sm']" :key="'outline-button-' + index">
      <h3 class="my-4 text-gray-50" :class="size">{{ size + ' outline buttons' }}</h3>
      <div class="row d-flex justify-content-center">
        <button v-for="item in aliasItems" :key="item" class="btn" :class="size + ' btn-outline-' + item">{{ item.charAt(0).toUpperCase() + item.slice(1) }}</button>
      </div>
      <div class="row mt-2 d-flex justify-content-center">
        <button v-for="item in colorItems" :key="item" class="btn" :class="size + ' btn-outline-' + item">{{ item.charAt(0).toUpperCase() + item.slice(1) }}</button>
      </div>
    </div>
    <h3 class="my-5 display-2 text-gray-50">Background Colors</h3>
    <div class="row d-flex justify-content-center">
      <div class="box-container d-flex">
        <div v-for="item in aliasItems" :key="item" :class="'bg-' + item" class="color-box">
          <span class="text-white">{{ '.bg-' + item }}</span>
        </div>
      </div>
    </div>
    <div class="row mt-4 d-flex justify-content-center flex-wrap">
      <div v-for="item in colorItems" :key="item" :class="'bg-' + item" class="color-box">
        <span class="text-white">{{ '.bg-' + item }}</span>
      </div>
    </div>
    <div class="row mt-4 d-flex justify-content-center flex-wrap">
      <div v-for="item in grayDegrees" :key="item" :class="'bg-gray-' + item" class="color-box">
        <span class="text-white">{{ '.bg-gray-' + item }}</span>
      </div>
    </div>

    <h3 class="my-5 display-2 text-gray-50">Box shadow</h3>
    <div class="row mt-4 d-flex justify-content-center flex-wrap">
      <div v-for="item in shadowDegrees" :key="item" :class="'shadow-' + item" class="p-2 react-box">
        <span>{{ '.shadow-' + item }}</span>
      </div>
    </div>

    <h3 class="my-5 display-2 text-gray-50">Avatars</h3>
    <div class="row mt-4 d-flex justify-content-center align-items-end flex-wrap">
      <div class="text-center p-3" v-for="item in avatars" :key="item">
        <img src="https://pigjian.com/images/default_avatar.png" class="mr-2" :class="'avatar-'+item">
        <div class="mt-1">{{ '.avatar-'+item }}</div>
      </div>
    </div>

    <h3 class="my-5 display-2 text-gray-50">Text sizes</h3>
    <div class="row mt-4 d-flex justify-content-center align-items-center flex-wrap">
      <div class="text-center p-1" v-for="item in textSizes" :key="item">
        <div class="mt-1" :class="'text-'+item">{{ '.text-'+item }}</div>
      </div>
    </div>

    <h3 class="my-5 display-2 text-gray-50">Icons</h3>
    <div class="row mt-4 d-flex justify-content-center flex-wrap">
      <div class="icon-item">
        <menu-icon decorative />
      </div>
      <div class="icon-item">
        <android-icon decorative />
      </div>
      <div class="icon-item">
        <ubuntu-icon />
      </div>
      <div class="icon-item">
        <account-circle-icon />
      </div>
      <div class="icon-item">
        <bell-icon />
      </div>
      <div class="icon-item">
        <msg-processing />
      </div>
    </div>
    <div class="mt-4"><a href="https://materialdesignicons.com/">https://materialdesignicons.com/</a></div>
  </div>
</template>

<script>
import AndroidIcon from '@icons/android'
import UbuntuIcon from '@icons/ubuntu'
import MenuIcon from '@icons/menu'
import BellIcon from '@icons/bell'
import MsgProcessing from '@icons/message-processing'
import AccountCircleIcon from '@icons/account-circle'
export default {
  components: { MenuIcon, AndroidIcon, UbuntuIcon, AccountCircleIcon, MsgProcessing, BellIcon },
  data () {
    return {
      textSizes: [10, 12, 13, 14, 16, 18, 20, 22, 24, 36, 48],
      avatars: [30, 40, 45, 60, 80, 120],
      grayDegrees: [5, 10, 15, 20, 30, 40, 50, 60, 70, 75, 80, 85, 90, 92, 94, 96, 97, 98],
      shadowDegrees: [0, 6, 30, 60],
      aliasItems: ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'],
      colorItems: ['blue', 'indigo', 'purple', 'pink', 'red', 'orange', 'yellow', 'green', 'teal', 'cyan', 'teal-blue', 'tiffany', 'orchid', 'bronze', 'facebook', 'twitter', 'pinterest', 'raisin-black', 'charcoal', 'payne-grey', 'grey-blue']
    }
  }
}
</script>

<style lang="scss">
.text-item {
  width: 160px;
  border: 1px solid #eee;
  padding: 10px 10px;
  margin: 5px;
  background: #fff;
}
.btn {
  margin: 5px;
}
.color-box {
  display: inline-block;
  width: 140px;
  height: 50px;
  margin: 5px;
  line-height: 50px;
  text-align: center;
}

.icon-item {
  display: inline-block;
  padding: 0 10px;
  font-size: 30px;
  color: #666;
  border: 1px solid currentColor;
  border-radius: 6px;
  margin: 5px;
}

.react-box {
  height: 120px;
  line-height: 80px;
  width: 25%;
  margin: 50px;
  background: #fff;
}
</style>
